import React, { Component } from 'react'
import { connect } from "react-redux"
import * as action from "../action/index.js"
import { bindActionCreators } from "redux"
import { Button } from "react-vant"
import { Dialog } from 'react-vant';
import { Form, Field } from 'react-vant';
import Dirlog1 from '../components/dirlog1.jsx'
import Dirlog2 from '../components/dirlog2.jsx'
class Address extends Component {
    state = {
        delIndex:0, //用于保存删除哪条得下标
        sonShow:false, // 控制弹窗组件得显示与隐藏
        show: false,
        editIndex:0,
        isEdit:"" // 用于提交表单时判断是编辑还是增加
    }
    // 让弹窗显示得方法
    showModel() {
        this.setState({
            show: true,
            isEdit:"新增"
        })
        setTimeout(()=>{
            this.myRef.setFieldsValue({
                name1:"",
                address:"",
                phone:""
            })
        },50)
    }
    // 让dirlog2 显示出来的事件
    del2(index){
        
        this.setState({
            sonShow:true,
            delIndex:index
        })
    }
    // 表单成功提交的方法
    onfnish(val) {
        console.log(val)
        if (this.state.isEdit == "新增") {
            this.props.addAddress(val)
            this.setState({
                show: false
            })
        } else {
            this.props.editAddress(val,this.state.editIndex)
            this.setState({
                show: false
            })
        }
      
    }
    // 点击取消让弹窗关闭
    onClose() {
        this.setState({
            show: false
        })
    }
   // 点击编辑得方法
   editfn(ind,item){
    console.log(item,2222222)
    this.setState({
        show: true,
        isEdit:"编辑",
        editIndex:ind
    })
    setTimeout(()=>{
        
        console.log(this.myRef,1111111)
        this.myRef.setFieldsValue(item)
    },0)
  
   }
   // 当我点击删除时候得函数
//    del(ind){
//     this.setState({
//         sonShow:true,
//         delIndex:ind
//     })
//    }
   sonshowfn = (data)=>{ //子组件传过来的
        console.log(data)
        this.setState({
            sonShow:data
        })
   }
    render() {
        console.log(this.props)
        return (
            <div className='address-wrap'>
                {
                    this.props.addressArr && this.props.addressArr.length ? this.props.addressArr.map((item, index) => {
                        return (
                            <div key={index}>
                                <p>
                                    <span>姓名：{item.name1}</span>
                                    <span>地址：{item.address}</span>
                                </p>
                                <p>
                                    电话：{item.phone}
                                    <button onClick={this.editfn.bind(this,index,item)}>编辑</button>
                                    <button onClick={this.del2.bind(this,index)}>删除</button>
                                </p>
                            </div>
                        )
                    }) : "暂无地址，请添加一条地址"
                }
                <Button style={{ position: "absolute", bottom: "55px" }} onClick={this.showModel.bind(this)}>添加地址</Button>

                <Dialog
                    visible={this.state.show}
                    title={this.state.isEdit}
                    // onCancel={this.close.bind(this)}
                    // onConfirm={this.onConfirm.bind(this)}
                    footer={<></>} //不要弹窗得底，弹窗得底是自动带一个确定和取消按钮
                >
                              
                    <Form
                        ref={(ref)=>this.myRef=ref}
                        onFinish={this.onfnish.bind(this)}  // 表单提交成功事件
                        footer={
                            <div style={{ margin: '16px 16px 0' }}>
                                <Button round nativeType="submit" type="primary" block style={{ width: "150px", margin: "5px" }}>
                                    提交
                                </Button>
                                {/* nativeType="button" 就不会触发表单的提交事件了 */}
                                <Button round  nativeType="button" block style={{ width: "150px", margin: "5px" }} onClick={this.onClose.bind(this)}>
                                    取消
                                </Button>
                            </div>
                        }
                    >
                        <Form.Item name="name1" label="姓名">
                            <Field placeholder="请输入姓名" />
                        </Form.Item>
                        <Form.Item name="address" label="地址">
                            <Field placeholder="请输入地址" />
                        </Form.Item>
                        <Form.Item name="phone" label="电话">
                            <Field placeholder="请输入电话" />
                        </Form.Item>
                    </Form>
                </Dialog>
                {/* <Dirlog1 isshow = {this.state.sonShow} isShowFn={this.sonshowfn} ind={this.state.delIndex}></Dirlog1> */}
                <Dirlog2 isShow = {this.state.sonShow}  isShowFn={this.sonshowfn} delind = {this.state.delIndex}></Dirlog2> 
                {/* 父组件得布尔值来控制弹窗得显示与隐藏 ,子组件给父组件传参，需要父组件子组件传一个方法，子组件触发父组件得方法*/}
            </div>
        )
    }
}

let mapStateToprops = (state) => {
    return {
        ...state.ShopReduer
    }
}
let mapDisPatchToProps = (dispatch) => bindActionCreators(action, dispatch)
export default connect(mapStateToprops, mapDisPatchToProps)(Address)